<template>
  <div class="bq">
    <el-tabs v-model="activeName" class="mt20" :tab-position="tabPosition" :style="leftHeight" @tab-click="handleClick">
      <el-tab-pane label="设备故障停线时间、次数报表" name="first">
        <div class="pic">
          <div class="condition">
            <div class="select-div">
              <div class="select-div">筛选周期：</div>
              <div class="select-div">
                <el-date-picker v-model="searchData1.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" value-format="yyyy-MM-dd HH:mm:ss" />
              </div>
              <div class="select-div ml10"><el-button type="primary" size="mini" @click="searchHandle1">搜索</el-button></div>
              <p>故障时间来源于维修工单， 完成时所记录的停线时间（手动填写）</p>
              <p>总和为y轴左侧的分钟</p>
              <p>次数直接调取该车间有停线时间的报修单数量</p>
            </div>
          </div>
          <div id="echarts1" class="mt30" style="width: 100%;height: 300px;" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="设备可动率报表" name="second">
        <div class="pic">
          <div class="condition">
            <div class="select-div">
              <div class="select-div ml10">
                <div class="select-div">车间：</div>
                <div class="select-div">
                  <el-select v-model="searchData2.workshop" size="mini">
                    <el-option v-for="(item,workshopIndex2) in chartsWorkShop" :key="workshopIndex2" :label="item" :value="workshopIndex2" />
                  </el-select>
                </div>
              </div>
              <div class="select-div ml10"><el-button type="primary" size="mini" @click="searchHandle2">搜索</el-button></div>
              <p>(生产时间-故障时间)/生产时间  单位是分钟</p>
              <p>在指标中添加生产时间和指标，然后选择车间即可生成报表，默认显示总工厂的</p>
            </div>
          </div>
          <div id="echarts2" class="mt30" style="width: 100%; height: 300px;" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="停台时间" name="third">
        <div class="pic">
          <div class="condition">
            <div class="select-div">
              <div class="select-div">筛选周期：</div>
              <div class="select-div">
                <el-date-picker v-model="searchData3.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" value-format="yyyy-MM-dd HH:mm:ss" />
              </div>
            </div>
            <div class="select-div ml10">
              <div class="select-div">车间：</div>
              <div class="select-div">
                <el-select v-model="searchData3.workshop" size="mini" @change="factoryChange3">
                  <el-option v-for="(item,workshopIndex3) in planWorkshop" :key="workshopIndex3" :label="item" :value="workshopIndex3" />
                </el-select>
              </div>
            </div>
            <div class="select-div ml10">
              <div class="select-div">班组：</div>
              <div class="select-div" style="width: 110px;">
                <v-select v-model="searchData3.member" action="classByFactory" :query="{factory: searchData3.workshop}" multiple />
              </div>
            </div>
            <div class="select-div ml10">
              <el-button type="primary" size="mini" @click="searchHandle3">搜索</el-button>
            </div>
            <div style="display: block">
              <p>y同设备故障停线时间，</p>
              <p>x轴第一种情况默认是所有车间，第二种情况是搜索单个车间，然后显示该车间下所有班组，第三种情况是搜索单个车间下指定的几个班组</p>
            </div>
          </div>
          <div id="echarts3" class="mt30" style="width: 100%; height: 300px;" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="故障十项分析" name="fourth">
        <div class="pic">
          <div class="condition">
            <div class="select-div">
              <div class="select-div">筛选周期：</div>
              <div class="select-div">
                <el-date-picker v-model="searchData4.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" />
              </div>
            </div>
            <div class="select-div ml10">
              <div class="select-div">车间：</div>
              <div class="select-div">
                <el-select v-model="searchData4.workshop" size="mini">
                  <el-option v-for="(item,workshopIndex4) in planWorkshop" :key="workshopIndex4" :label="item" :value="workshopIndex4" />
                </el-select>
              </div>
            </div>
            <div class="select-div ml10">
              <el-button type="primary" size="mini" @click="searchHandle4">搜索</el-button>
            </div>
            <div>
              <p>相同二级分类的资产的停线时间合计，前10项</p>
            </div>
          </div>
          <div id="echarts4" class="mt30" style="width: 100%; height: 300px;" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="预防计划完成率" name="fifth">
        <div class="pic">
          <div class="condition">
            <div class="select-div">
              <div class="select-div">筛选周期：</div>
              <div class="select-div">
                <el-date-picker v-model="searchData5.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" value-format="yyyy-MM-dd HH:mm:ss" />
              </div>
            </div>
            <div class="select-div ml10">
              <div class="select-div">种类：</div>
              <div class="select-div">
                <el-select v-model="searchData5.kind" size="mini" disabled>
                  <el-option v-for="(item,search5KindIndex) in planKind" :key="search5KindIndex" :label="item" :value="search5KindIndex" />
                </el-select>
              </div>
            </div>
            <div class="select-div ml10">
              <el-button type="primary" size="mini" @click="searchHandle5">搜索</el-button>
            </div>
            <div style="display: block">
              <p>查询各个车间的当前工单状态百分比</p>
            </div>
          </div>
          <div id="echarts5" class="mt30" style="width: 100%; height: 300px;" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="预防维护发现问题统计表" name="sixth">
        <div class="pic">
          <div class="condition">
            <div class="select-div">
              <div class="select-div">筛选周期：</div>
              <div class="select-div">
                <el-date-picker v-model="searchData6.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" value-format="yyyy-MM-dd HH:mm:ss" />
              </div>
            </div>
            <div class="select-div ml10">
              <div class="select-div">车间：</div>
              <div class="select-div" style="width: 110px;">
                <el-select v-model="searchData6.workshop" size="mini" @change="factoryChange6">
                  <el-option v-for="(item,workshopIndex6) in planWorkshop" :key="workshopIndex6" :label="item" :value="workshopIndex6" />
                </el-select>
              </div>
            </div>
            <div class="select-div ml10">
              <div class="select-div">班组：</div>
              <div class="select-div" style="width: 110px;">
                <v-select v-model="searchData6.member" action="classByFactory" :query="{factory: searchData6.workshop}" multiple />
              </div>
            </div>
            <div class="select-div ml10">
              <div class="select-div">工单种类：</div>
              <div class="select-div" style="width: 110px;">
                <el-select v-model="searchData6.kind" placeholder="请选择" size="mini">
                  <el-option key="0" label="自主点检" :value="0" />
                  <el-option key="1" label="自主维护" :value="1" />
                  <el-option key="2" label="专业点检" :value="2" />
                  <el-option key="3" label="专业维护" :value="3" />
                </el-select>
              </div>
            </div>
            <div class="select-div ml10">
              <el-button type="primary" size="mini" @click="searchHandle6">搜索</el-button>
            </div>
            <div style="display: block">
              <p>查询各个车间或班组在不同计划（自主点检或自主维护，或专业点检或专业维护）中发现的问题次数</p>
            </div>
          </div>
          <div id="echarts6" class="mt30" style="width: 100%; height: 300px;" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="维护工时（专业维护）" name="seventh">
        <div class="pic">
          <div class="condition">
            <div class="select-div ml10">
              <div class="select-div">筛选周期：</div>
              <div class="select-div">
                <el-date-picker v-model="searchData7.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" value-format="yyyy-MM-dd HH:mm:ss" />
              </div>
            </div>
            <div class="select-div ml10">
              <el-button type="primary" size="mini" @click="searchHandle7">搜索</el-button>
            </div>
            <div style="display: block">
              <p>查询各个车间的专业维护时长</p>
            </div>
          </div>
          <div id="echarts7" class="mt30" style="width: 100%; height: 300px;" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="预防性维修占比（PM）" name="eighth">
        <div class="pic">
          <div class="condition">
            <div class="select-div">
              <div class="select-div">筛选周期：</div>
              <div class="select-div">
                <el-date-picker v-model="searchData8.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" value-format="yyyy-MM-dd HH:mm:ss" />
              </div>
            </div>
            <div class="select-div ml10">
              <el-button type="primary" size="mini" @click="searchHandle8">搜索</el-button>
            </div>
            <div style="display: block">
              <p>查询各个车间的维修单，该工厂所有维修单来源于维护计划的时长/该工厂所有维修单的总时长</p>
            </div>
          </div>
          <div id="echarts8" class="mt30" style="width: 100%; height: 300px;" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="TOP10消费备件" name="ninth">
        <div class="pic">
          <div class="condition">
            <div class="select-div">
              <div class="select-div">筛选周期：</div>
              <div class="select-div">
                <el-date-picker v-model="searchData9.date" class="select" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" size="mini" />
              </div>
            </div>
            <div class="select-div ml10">
              <div class="select-div">车间：</div>
              <div class="select-div">
                <el-select v-model="searchData9.workshop" size="mini">
                  <el-option v-for="(item,workshopIndex9) in chartsWorkShop" :key="workshopIndex9" :label="item" :value="workshopIndex9" />
                </el-select>
              </div>
            </div>
            <div class="select-div ml10">
              <el-button type="primary" size="mini" @click="searchHandle9">搜索</el-button>
            </div>
            <div style="display: block">
              <p>查询所有工单关联的出库单中的备件，按出库数量排序，查询前十名</p>
            </div>
          </div>
          <div id="echarts9" class="mt30" style="width: 100%; height: 500px;" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="MTBF" name="tenth">
        <div class="pic">
          <div class="condition">
            <div class="select-div ml10">
              <div class="select-div">车间：</div>
              <div class="select-div">
                <el-select v-model="searchData10.workshop" size="mini">
                  <el-option v-for="(item,workshopIndex10) in mtbfWorkShop" :key="workshopIndex10" :label="item" :value="workshopIndex10" />
                </el-select>
              </div>
            </div>
            <div class="select-div ml10">
              <el-button type="primary" size="mini" @click="searchHandle10">搜索</el-button>
            </div>
            <div style="display: block">
              <p>（生产时间-停线时间）/停机次数</p>
              <p>生产时间输入，停机次数查询报修次数</p>
            </div>
          </div>
          <div id="echarts10" class="mt30" style="width: 100%; height: 300px;" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="MTTR" name="eleventh">
        <div class="pic">
          <div class="condition">
            <div class="select-div ml10">
              <div class="select-div">车间：</div>
              <div class="select-div">
                <el-select v-model="searchData11.workshop" size="mini">
                  <el-option v-for="(item,workshopIndex11) in mttrWorkShop" :key="workshopIndex11" :label="item" :value="workshopIndex11" />
                </el-select>
              </div>
            </div>
            <div class="select-div ml10">
              <el-button type="primary" size="mini" @click="searchHandle11">搜索</el-button>
            </div>
            <div style="display: block">
              <p>所有维修时间/停机次数</p>
              <p>维修时间计算该单位关联所有维修工单中停线时间字段的总和，次数计算有停线时间工单的次数</p>
            </div>
          </div>
          <div id="echarts11" class="mt30" style="width: 100%; height: 300px;" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import API from '@/api/charts/charts'
import { planWorkshop, planKind } from '@/utils/options'
import VSelect from '@/components/select'
const echarts = require('echarts')
export default {
  components: {
    VSelect
  },
  data() {
    return {
      activeName: 'fifth',
      planWorkshop,
      planKind,
      data1: {
        categories: ['冲压车间', '车身车间', '涂装车间', '总装车间', '设备动力'],
        minute: [0, 0, 0, 0, 0],
        times: [0, 0, 0, 0, 0]
      },
      searchData1: {
        date: ''
      },
      data2: {
        categories: ['工厂', '指标'],
        month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        values: [
          {
            name: '工厂',
            type: 'line',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '指标',
            type: 'line',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      },
      searchData2: {
        workshop: 0
      },
      data3: {
        minute: [0, 0, 0, 0, 0],
        times: [0, 0, 0, 0, 0],
        categories: ['冲压车间', '车身车间', '涂装车间', '总装车间', '设备动力']
      },
      searchData3: {},
      data4: {
        categories: [],
        times: [],
        minute: []
      },
      searchData4: {},
      data5: {
        categories: ['冲压车间', '车身车间', '涂装车间', '总装车间', '生产管理部', '质量部', '设备动力部']
      },
      searchData5: {
        kind: 0
      },
      data6: {
        categories: [],
        times: []
      },
      searchData6: {},
      data7: {
        categories: ['冲压车间', '车身车间', '涂装车间', '总装车间', '质量部', '生产管理部', '设备动力部'],
        minute: [0, 0, 0, 0, 0, 0, 0]
      },
      searchData7: {},
      data8: {
        categories: ['冲压车间', '车身车间', '涂装车间', '总装车间', '质量部', '生产管理部', '设备动力部'],
        percent: [12, 49, 70, 23, 25, 22, 33]
      },
      searchData8: {},
      data9: {
        circle: [
          {
            name: '123',
            value: 10
          },
          {
            name: '234',
            value: 10
          }
        ]
      },
      searchData9: {},
      data10: {
        categories: ['工厂', '指标'],
        month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        values: [
          {
            name: '工厂',
            type: 'line',
            data: [12, 13, 10, 13, 90, 23, 21]
          },
          {
            name: '指标',
            type: 'line',
            data: [22, 18, 19, 23, 29, 33, 31]
          }
        ]
      },
      searchData10: {
        workshop: 0
      },
      data11: {
        categories: ['工厂', '指标'],
        month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        values: [
          {
            name: '工厂',
            type: 'line',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '指标',
            type: 'line',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      },
      searchData11: {
        workshop: 0
      },
      leftHeight: null,
      tabPosition: 'left',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value: '',
      chartsWorkShop: ['工厂', '冲压车间', '车身车间', '涂装车间', '总装车间'],
      mttrWorkShop: ['工厂', '冲压保全班', '车身保全班', '涂装保全班', '总装保全班', '动力维修班'],
      mtbfWorkShop: ['工厂', '冲压车间', '车身车间', '涂装车间', '总装车间'],
      queryWorkshop3: null,
      queryWorkshop6: null,
      queryLine10: null,
      queryLine11: null
    }
  },
  computed: {
    tableMaxHeight() {
      return window.innerHeight - 60 + 'px'
    }
  },
  mounted() {
    this.leftHeight = `height: ${this.tableMaxHeight}`
    this.fifthCharts()
    this.index()
  },
  methods: {
    index() {
      const myChart1 = echarts.init(document.getElementById('echarts1'))
      myChart1.resize()
      const myChart2 = echarts.init(document.getElementById('echarts2'))
      myChart2.resize()
      const myChart3 = echarts.init(document.getElementById('echarts3'))
      myChart3.resize()
      const myChart4 = echarts.init(document.getElementById('echarts4'))
      myChart4.resize()
      const myChart5 = echarts.init(document.getElementById('echarts5'))
      myChart5.resize()
      const myChart6 = echarts.init(document.getElementById('echarts6'))
      myChart6.resize()
      const myChart7 = echarts.init(document.getElementById('echarts7'))
      myChart7.resize()
      const myChart8 = echarts.init(document.getElementById('echarts8'))
      myChart8.resize()
      const myChart9 = echarts.init(document.getElementById('echarts9'))
      myChart9.resize()
      const myChart10 = echarts.init(document.getElementById('echarts10'))
      myChart10.resize()
      const myChart11 = echarts.init(document.getElementById('echarts11'))
      myChart11.resize()
    },
    firstCharts() {
      const myChart1 = echarts.init(document.getElementById('echarts1'))
      API.charts1(this.searchData1).then(res => {
        console.log(res)
        this.$nextTick(() => {
          this.data1.minute = res.data.minute
          this.data1.times = res.data.times
          myChart1.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            legend: {
              data: ['分钟', '次数']
            },
            xAxis: [
              {
                type: 'category',
                data: this.data1.categories,
                axisPointer: {
                  type: 'shadow'
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '分钟'
              },
              {
                type: 'value',
                name: '次数'
              }
            ],
            series: [
              {
                name: '分钟',
                type: 'bar',
                data: this.data1.minute
              },
              {
                name: '次数',
                type: 'line',
                yAxisIndex: 1,
                data: this.data1.times
              }
            ]
          })
          myChart1.resize()
        })
      })
    },
    secondCharts() {
      const myChart2 = echarts.init(document.getElementById('echarts2'))
      API.charts2(this.searchData2).then(res => {
        const z = res.data.z
        const f = res.data.f
        z.map(zItem => {
          if (zItem === '') {
            this.$message.error('请先完善每个月的月读指标！')
          }
        })
        this.data2.categories = [res.data.n, '指标']
        this.data2.values = [
          {
            name: res.data.n,
            type: 'line',
            data: f
          },
          {
            name: '指标',
            type: 'line',
            data: z
          }
        ]
        this.$nextTick(() => {
          myChart2.setOption({
            tooltip: {
              trigger: 'axis',
              formatter(e) {
                return e[0].name + '<br>' + e.map((item) => {
                  return `<span class="eacharts-span" style="background:${item.color};}"></span>${item.seriesName} ${item.value}%<br>`
                }).join('')
              }
            },
            legend: {
              data: this.data2.categories
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.data2.month
            },
            yAxis: {
              type: 'value',
              name: '百分比（%）'
            },
            series: this.data2.values
          })
          myChart2.resize()
        })
      })
    },
    thirdCharts() {
      const myChart3 = echarts.init(document.getElementById('echarts3'))
      API.charts3(this.searchData3).then(res => {
        console.log(res)
        this.data3 = {
          minute: res.data.minute,
          times: res.data.times,
          categories: res.data.categories
        }
        this.$nextTick(() => {
          myChart3.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            legend: {
              data: ['分钟', '次数']
            },
            xAxis: [
              {
                type: 'category',
                data: this.data3.categories,
                axisPointer: {
                  type: 'shadow'
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '分钟'
              },
              {
                type: 'value',
                name: '次数'
              }
            ],
            series: [
              {
                name: '分钟',
                type: 'bar',
                data: this.data3.minute
              },
              {
                name: '次数',
                type: 'line',
                yAxisIndex: 1,
                data: this.data3.times
              }
            ]
          })
          myChart3.resize()
        })
      })
    },
    fourthCharts() {
      const myChart4 = echarts.init(document.getElementById('echarts4'))
      API.charts4(this.searchData4).then(res => {
        console.log(res)
        this.data4 = {
          categories: res.data.ws,
          times: res.data.times,
          minute: res.data.minute
        }
        this.$nextTick(() => {
          myChart4.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            legend: {
              data: ['分钟', '次数']
            },
            xAxis: [
              {
                type: 'category',
                data: this.data4.categories,
                axisPointer: {
                  type: 'shadow'
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '分钟'
              },
              {
                type: 'value',
                name: '次数'
              }
            ],
            series: [
              {
                name: '分钟',
                type: 'bar',
                data: this.data4.minute
              },
              {
                name: '次数',
                type: 'line',
                yAxisIndex: 1,
                data: this.data4.times
              }
            ]
          })
          myChart4.resize()
        })
      })
    },
    fifthCharts() {
      const myChart5 = echarts.init(document.getElementById('echarts5'))
      API.charts8(this.searchData5).then(res => {
        console.log(res)
        this.$nextTick(() => {
          myChart5.setOption({
            tooltip: {
              trigger: 'axis',
              formatter(e) {
                return e[0].name + '<br>' + e.map((item) => {
                  return `<span class="eacharts-span" style="background:${item.color};}"></span>${item.seriesName} ${item.value}%<br>`
                }).join('')
              }
            },
            legend: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: this.data5.categories
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '百分比（%）'
              }
            ],
            series: [
              {
                name: '待办',
                type: 'bar',
                emphasis: {
                  focus: 'series'
                },
                data: res.data[0]
              },
              {
                name: '完成',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                data: res.data[1]
              },
              {
                name: '超时',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                data: res.data[2]
              },
              {
                name: '申请停产',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                data: res.data[3]
              },
              {
                name: '停产',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                data: res.data[4]
              }
            ]
          })
          myChart5.resize()
        })
      })
    },
    sixthCharts() {
      const myChart6 = echarts.init(document.getElementById('echarts6'))
      API.charts6(this.searchData6).then(res => {
        console.log(res)
        this.data6.categories = res.data.categories
        this.data6.times = res.data.times
        this.$nextTick(() => {
          myChart6.setOption({
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              data: this.data6.categories
            },
            yAxis: {
              type: 'value',
              name: '（次）'
            },
            series: [
              {
                data: this.data6.times,
                type: 'line'
              }
            ]
          })
          myChart6.resize()
        })
      })
    },
    seventhCharts() {
      const myChart7 = echarts.init(document.getElementById('echarts7'))
      API.charts7(this.searchData7).then(res => {
        console.log(res)
        this.data7.minute = res.data
        this.$nextTick(() => {
          myChart7.setOption({
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              data: this.data7.categories
            },
            yAxis: {
              type: 'value',
              name: '（分钟）'
            },
            series: [
              {
                data: this.data7.minute,
                type: 'line'
              }
            ]
          })
          myChart7.resize()
        })
      })
    },
    eighthCharts() {
      const myChart8 = echarts.init(document.getElementById('echarts8'))
      API.charts8(this.searchData8).then(res => {
        console.log(res)
        this.data8.percent = res.data
        this.$nextTick(() => {
          myChart8.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              },
              formatter(e) {
                return `${e[0].name}<br>${e[0].value}%`
              }
            },
            xAxis: {
              type: 'category',
              data: this.data8.categories
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value}%'
              }
            },
            series: [
              {
                data: this.data8.percent,
                type: 'line'
              }
            ]
          })
          myChart8.resize()
        })
      })
    },
    ninthCharts() {
      const myChart9 = echarts.init(document.getElementById('echarts9'))
      API.charts9(this.searchData9).then(res => {
        console.log(res)
        this.data9.circle = res.data
        this.$nextTick(() => {
          myChart9.setOption({
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: 'Top10备件',
                type: 'pie',
                radius: '50%',
                data: this.data9.circle,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
          myChart9.resize()
        })
      })
    },
    tenthCharts() {
      const myChart10 = echarts.init(document.getElementById('echarts10'))
      API.charts10(this.searchData10).then(res => {
        console.log(res)
        this.data10.categories = [res.data.n, '指标']
        this.data10.values = [
          {
            name: res.data.n,
            type: 'line',
            data: res.data.f
          },
          {
            name: '指标',
            type: 'line',
            data: res.data.z
          }
        ]
        console.log(this.data10)
        this.$nextTick(() => {
          myChart10.setOption({
            tooltip: {
              trigger: 'axis',
              formatter(e) {
                return e[0].name + '<br>' + e.map((item) => {
                  return `<span class="eacharts-span" style="background:${item.color};}"></span>${item.seriesName} ${item.value}分钟<br>`
                }).join('')
              }
            },
            legend: {
              data: this.data10.categories
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.data10.month
            },
            yAxis: {
              type: 'value',
              name: '分钟（min）'
            },
            series: this.data10.values
          })
          myChart10.resize()
        })
      })
    },
    eleventhCharts() {
      const myChart11 = echarts.init(document.getElementById('echarts11'))
      API.charts11(this.searchData11).then(res => {
        console.log(res)
        this.data11.categories = [res.data.n, '指标']
        this.data11.values = [
          {
            name: res.data.n,
            type: 'line',
            data: res.data.f
          },
          {
            name: '指标',
            type: 'line',
            data: res.data.z
          }
        ]
        this.$nextTick(() => {
          myChart11.setOption({
            tooltip: {
              trigger: 'axis',
              formatter(e) {
                return e[0].name + '<br>' + e.map((item) => {
                  return `<span class="eacharts-span" style="background:${item.color};}"></span>${item.seriesName} ${item.value}分钟<br>`
                }).join('')
              }
            },
            legend: {
              data: this.data11.categories
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.data11.month
            },
            yAxis: {
              type: 'value',
              name: '分钟（min）'
            },
            series: this.data11.values
          })
          myChart11.resize()
        })
      })
    },
    handleClick(tab) {
      if (tab.index === '0') {
        this.firstCharts()
      }
      if (tab.index === '1') {
        this.secondCharts()
      }
      if (tab.index === '2') {
        this.thirdCharts()
      }
      if (tab.index === '3') {
        this.fourthCharts()
      }
      if (tab.index === '4') {
        this.fifthCharts()
      }
      if (tab.index === '5') {
        this.sixthCharts()
      }
      if (tab.index === '6') {
        this.seventhCharts()
      }
      if (tab.index === '7') {
        this.eighthCharts()
      }
      if (tab.index === '8') {
        this.ninthCharts()
      }
      if (tab.index === '9') {
        this.tenthCharts()
      }
      if (tab.index === '10') {
        this.eleventhCharts()
      }
    },
    factoryChange3(value) {
      if (value !== this.queryWorkshop3) {
        this.searchData3.member = null
        this.queryWorkshop3 = value
      }
    },
    factoryChange6(value) {
      if (value !== this.queryWorkshop6) {
        this.searchData6.member = null
        this.queryWorkshop6 = value
      }
    },
    searchHandle1() {
      this.firstCharts()
    },
    searchHandle2() {
      this.secondCharts()
    },
    searchHandle3() {
      this.thirdCharts(this.searchData3)
    },
    searchHandle4() {
      this.fourthCharts(this.searchData4)
    },
    searchHandle5() {
      this.fifthCharts(this.searchData5)
    },
    searchHandle6() {
      this.sixthCharts(this.searchData6)
    },
    searchHandle7() {
      this.seventhCharts(this.searchData7)
    },
    searchHandle8() {
      this.eighthCharts(this.searchData8)
    },
    searchHandle9() {
      this.ninthCharts()
    },
    searchHandle10() {
      this.tenthCharts()
    },
    searchHandle11() {
      this.eleventhCharts()
    }
  }
}
</script>

<style>
.mt20{
  margin-top: 20px;
}
.mt30{
  margin-top: 30px;
}
.select{
  width: 200px;
}
.pic{
  min-height: 800px;
}
.pic .condition{
  text-align: center;
}
.condition .select-div{
  display: inline-block;
}
.bq .el-tabs__nav-scroll{
  overflow-y: scroll;
}
/*.bq .el-tabs__content{*/
/*  position: absolute;*/
/*  top:20px;*/
/*  left: 350px;*/
/*  overflow-y: auto;*/
/*  background-color: #fff;*/
/*}*/
.eacharts-span{
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
}
</style>
